Quy tắc @when trong CSS: Cách mạng hóa việc tạo kiểu có điều kiện và phát hiện tính năng cho Web toàn cầu

Trong thế giới phát triển web năng động, việc tạo ra các giao diện người dùng mạnh mẽ, dễ thích ứng và hiệu suất cao đòi hỏi nhiều hơn là chỉ tạo kiểu tĩnh. Các nhà phát triển liên tục phải đối mặt với sự không nhất quán của trình duyệt, khả năng thiết bị khác nhau và sở thích đa dạng của người dùng. Trong nhiều năm, bộ công cụ của chúng ta để xử lý những thách thức này chủ yếu bao gồm các truy vấn @media cho các điều kiện môi trường và truy vấn @supports để phát hiện tính năng, thường được bổ sung bằng JavaScript cho các kịch bản phức tạp hơn. Mặc dù hiệu quả, những giải pháp này đôi khi có thể cảm thấy rời rạc hoặc yêu cầu logic phức tạp.

Hãy cùng tìm hiểu quy tắc @when trong CSS được đề xuất: một nguyên tắc mới mạnh mẽ được thiết lập để hợp lý hóa việc áp dụng kiểu có điều kiện và mang lại một cấp độ kiểm soát khai báo mới trực tiếp vào stylesheet của chúng ta. Hướng dẫn toàn diện này sẽ khám phá quy tắc @when, tiềm năng của nó trong việc thay đổi cách chúng ta tiếp cận thiết kế đáp ứng và nâng cao lũy tiến, và cách nó có thể trao quyền cho các nhà phát triển để xây dựng những trải nghiệm web thực sự toàn cầu và linh hoạt.

Thách thức: Logic điều kiện phân mảnh trong CSS

Trước khi đi sâu vào @when, hãy cùng tìm hiểu bối cảnh mà nó hướng tới cải thiện. Hãy tưởng tượng bạn muốn áp dụng một bố cục cụ thể:

• Chỉ trên màn hình lớn (@media).
• Chỉ khi CSS Grid được hỗ trợ (@supports).
• Và có thể chỉ khi người dùng ưa thích giao diện màu tối (một tính năng khác của @media).

Hiện tại, để đạt được điều này cần phải lồng các quy tắc hoặc sử dụng nhiều quy tắc riêng biệt. Ví dụ, bạn có thể viết:

            @media (min-width: 1024px) {
  @supports (display: grid) {
    @media (prefers-color-scheme: dark) {
      .container {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 20px;
      }
    }
  }
}
            

              
                Copy
              
            
          

Việc lồng các quy tắc này nhanh chóng trở nên cồng kềnh và khó đọc, đặc biệt khi có nhiều điều kiện. Hơn nữa, việc xử lý nhiều kịch bản thay thế thường đòi hỏi một chuỗi các quy tắc hoặc phụ thuộc vào JavaScript để áp dụng các lớp một cách linh động, điều này làm tăng thêm độ phức tạp và có thể ảnh hưởng đến hiệu suất.

Quy tắc @when cung cấp một cú pháp thanh lịch, thống nhất và mang tính khai báo hơn để kết hợp các điều kiện này, giúp logic CSS của bạn rõ ràng và dễ bảo trì hơn.

Tìm hiểu về Quy tắc @when trong CSS

Về cơ bản, quy tắc @when cho phép bạn nhóm một tập hợp các khai báo kiểu chỉ được áp dụng khi một hoặc nhiều điều kiện được chỉ định được đáp ứng. Nó thực chất là một cấu trúc if/else if/else gốc của CSS.

Cú pháp cơ bản

Dạng đơn giản nhất của @when trông như thế này:

            @when condition {
  /* Styles applied if condition is true */
}
            

              
                Copy
              
            
          

Sức mạnh thực sự xuất hiện khi bạn kết hợp các điều kiện bằng cách sử dụng các toán tử logic (and, or, not) và khi bạn tận dụng các mệnh đề else và else when.

Các điều kiện trong @when

Các điều kiện trong @when hiện đang dựa trên các nguyên tắc CSS hiện có, cụ thể là:

• Hàm @supports(): Dùng để kiểm tra sự hỗ trợ của trình duyệt đối với các thuộc tính hoặc giá trị CSS cụ thể. Ví dụ, @supports(display: grid) hoặc @supports(selector(:-moz-focusring)).
• Hàm @media(): Dùng để truy vấn các đặc điểm môi trường như kích thước màn hình, hướng, bảng màu hoặc giảm chuyển động. Ví dụ, @media(min-width: 768px) hoặc @media(prefers-color-scheme: dark).

Điều quan trọng cần lưu ý là đây là các hàm trong @when, không phải là các at-rule độc lập. Sự khác biệt này rất quan trọng để hiểu cách chúng có thể được kết hợp.

@when cho việc phát hiện tính năng và nâng cao lũy tiến

Nâng cao lũy tiến là một nền tảng của phát triển web hiện đại, đảm bảo trải nghiệm cơ bản cho tất cả người dùng trong khi cung cấp các chức năng phong phú hơn cho những người có trình duyệt đủ khả năng. @when tăng cường đáng kể khả năng triển khai chiến lược này của chúng ta.

Ví dụ: Bố cục Grid với phương án dự phòng

Giả sử bạn muốn sử dụng CSS Grid cho bố cục chính của mình, nhưng cung cấp một phương án dự phòng bằng Flexbox cho các trình duyệt không hỗ trợ Grid.

            .product-grid {
  display: flex; /* Default fallback for older browsers */
  flex-wrap: wrap;
  gap: 15px;
}

@when @supports(display: grid) {
  .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
  }
}
            

              
                Copy
              
            
          

Trong kịch bản này, nếu trình duyệt hỗ trợ display: grid, các thuộc tính display: flex và flex-wrap sẽ bị ghi đè một cách hiệu quả bởi các kiểu dành riêng cho Grid. Điều này sạch sẽ hơn so với các quy tắc lồng nhau phức tạp hoặc dựa vào một polyfill JavaScript cho bố cục cơ bản.

@when cho việc tạo kiểu môi trường có điều kiện

Việc kết hợp trực tiếp các truy vấn media trong các điều kiện @when cho phép tạo ra logic thiết kế đáp ứng cực kỳ chính xác.

Ví dụ: Tạo kiểu Header động

Hãy xem xét một header thay đổi bố cục dựa trên kích thước màn hình, nhưng cũng điều chỉnh khoảng cách nếu một tính năng CSS cụ thể (như gap trên các container flex) có sẵn.

            header {
  padding: 10px 20px;
  background-color: #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@when @media(min-width: 768px) {
  header {
    flex-direction: row;
  }
} @else when @media(max-width: 767px) {
  header {
    flex-direction: column;
    text-align: center;
  }
}

@when @supports(gap: 10px) {
  header {
    gap: 10px; /* Applies if 'gap' is supported */
  }
}
            

              
                Copy
              
            
          

Ví dụ này minh họa cách @when có thể được sử dụng trong các khối riêng biệt, nhưng sức mạnh thực sự của nó tỏa sáng khi các điều kiện được kết hợp trong một khối duy nhất.

Sức mạnh của sự kết hợp: @when trong thực tế

Khả năng kết hợp các hàm @supports() và @media() với các toán tử logic (and, or, not) là nơi @when thực sự tỏa sáng, mang lại một cấp độ kiểm soát khai báo chưa từng có.

Ví dụ nâng cao: Bố cục Card đáp ứng và nhận biết tính năng

Hãy thiết kế một bố cục thẻ thích ứng với các kịch bản khác nhau:

1. Trên màn hình lớn (>= 1024px) và có hỗ trợ CSS Grid, sử dụng bố cục Grid phức tạp.
2. Trên màn hình trung bình (768px đến 1023px) và có hỗ trợ Flexbox, sử dụng bố cục Flexbox.
3. Trên màn hình nhỏ (< 768px) hoặc cho các trình duyệt không có Grid/Flexbox, sử dụng bố cục khối đơn giản với lề rộng.

            .card-container {
  /* Baseline styles for all scenarios */
  display: block;
  margin-block-start: 1rem;
  margin-block-end: 1rem;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  background-color: #fff;
}

@when @media(min-width: 1024px) and @supports(display: grid) {
  .card-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
} @else when @media(min-width: 768px) and @supports(display: flex) {
  .card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 15px;
  }
  .card {
    flex: 1 1 calc(50% - 15px); /* Two cards per row */
    max-width: calc(50% - 15px);
  }
} @else {
  /* Fallback for small screens or unsupported browsers */
  .card {
    margin-bottom: 20px; /* Add spacing between block cards */
    max-width: 100%;
  }
}
            

              
                Copy
              
            
          

Ví dụ này minh họa một cách sống động cách @when cho phép bạn tạo ra một tập hợp các kiểu có điều kiện theo tầng, cung cấp các trải nghiệm phù hợp dựa trên sự kết hợp giữa khả năng của thiết bị và các tính năng của trình duyệt. Khối `@else` đảm bảo rằng ngay cả trong những môi trường cơ bản nhất, nội dung vẫn có thể đọc được và hoạt động tốt.

Góc nhìn toàn cầu và các phương pháp hay nhất

Việc áp dụng các tính năng CSS mới đòi hỏi sự cân nhắc cẩn thận, đặc biệt khi nhắm đến đối tượng người dùng toàn cầu với các thiết bị, điều kiện mạng và sở thích trình duyệt đa dạng. Quy tắc @when hoàn toàn phù hợp với chiến lược xây dựng các ứng dụng web linh hoạt và toàn diện.

Nâng cao lũy tiến ở mức tốt nhất

@when vốn được thiết kế cho việc nâng cao lũy tiến. Bằng cách xác định các kiểu cơ bản và sau đó cải thiện chúng từng bước khi các khả năng có sẵn, bạn đảm bảo một trải nghiệm nhất quán trên toàn bộ các môi trường người dùng. Cách tiếp cận này đặc biệt có giá trị đối với các thị trường toàn cầu nơi các thiết bị cũ hơn hoặc mạng có hiệu suất kém phổ biến hơn.

Đảm bảo tương thích trình duyệt và các phương án dự phòng

Tại thời điểm viết bài này (đầu năm 2024), quy tắc @when vẫn là một Bản nháp làm việc trong đặc tả CSS Conditional Rules Module Level 5. Điều này có nghĩa là nó chưa được hỗ trợ rộng rãi trong các trình duyệt phổ biến. Do đó, điều cực kỳ quan trọng là:

• Cung cấp các phương án dự phòng mạnh mẽ: Luôn đảm bảo nội dung và chức năng cốt lõi của bạn có thể truy cập và được tạo kiểu một cách chấp nhận được mà không cần các tính năng nâng cao của quy tắc @when. Khối @else là mạng lưới an toàn của bạn.
• Sử dụng các truy vấn tính năng một cách khôn ngoan: Mặc dù @when đơn giản hóa việc kết hợp chúng, chỉ phát hiện các tính năng thực sự nâng cao trải nghiệm người dùng.
• Theo dõi hỗ trợ của trình duyệt: Hãy theo dõi các tài nguyên như Can I Use... để cập nhật thông tin tương thích.
• Cân nhắc polyfill/transpiler (một cách thận trọng): Đối với các chức năng quan trọng phải hoạt động ở mọi nơi và được hưởng lợi từ logic giống @when, hãy khám phá các giải pháp thay thế bằng JavaScript hoặc các bộ tiền xử lý CSS có thể tái tạo logic tương tự, nhưng hãy hiểu rõ các ưu và nhược điểm.

Hiệu suất và khả năng bảo trì

Việc tích hợp trực tiếp logic điều kiện vào CSS có thể mang lại một số lợi ích:

• Giảm sự phụ thuộc vào JavaScript: Ít kịch bản phía máy khách hơn có nghĩa là kích thước gói nhỏ hơn, tải trang ban đầu nhanh hơn và có khả năng hiệu suất tốt hơn trên các thiết bị cấp thấp.
• Cải thiện khả năng đọc và bảo trì: Việc hợp nhất các kiểu có điều kiện ở một nơi trong CSS giúp mã nguồn dễ hiểu, gỡ lỗi và cập nhật hơn. Các nhà phát triển không còn cần phải chuyển qua lại giữa các tệp CSS và JavaScript để hiểu tại sao một số kiểu nhất định được áp dụng.
• Atomic CSS với các điều kiện: Hãy tưởng tượng các lớp tiện ích chỉ áp dụng nếu các điều kiện cụ thể được đáp ứng, dẫn đến các mẫu tạo kiểu có điều kiện và có khả năng tái sử dụng cao.

Những lưu ý về khả năng truy cập

Khi tạo các kiểu có điều kiện, luôn đảm bảo rằng các phương án dự phòng và các phiên bản nâng cao của bạn duy trì các tiêu chuẩn truy cập cao. Ví dụ:

• Nếu bạn đang tải các hoạt ảnh có điều kiện, hãy luôn tôn trọng sở thích của người dùng về việc giảm chuyển động (@media(prefers-reduced-motion: reduce)).
• Đảm bảo tỷ lệ tương phản màu sắc vẫn đầy đủ trên các bảng màu khác nhau.
• Xác minh rằng các chỉ báo tiêu điểm và điều hướng bằng bàn phím hoạt động trong mọi kịch bản.

Tương lai của CSS có điều kiện

Quy tắc @when đại diện cho một bước tiến đáng kể cho CSS, trao quyền cho các nhà phát triển với các công cụ biểu cảm và mang tính khai báo hơn để giải quyết sự phức tạp của thiết kế web hiện đại. Nó phù hợp với xu hướng rộng lớn hơn là đưa nhiều logic và quyền kiểm soát hơn trực tiếp vào CSS, giảm sự phụ thuộc vào JavaScript cho các vấn đề về tạo kiểu.

Khi các tiêu chuẩn web tiếp tục phát triển, chúng ta có thể dự đoán những cải tiến hơn nữa và có lẽ là các loại điều kiện mới có thể được tận dụng trong @when. Quy tắc này mở đường cho một trang web mạnh mẽ, dễ bảo trì và được nâng cao lũy tiến hơn, giúp việc xây dựng trải nghiệm chất lượng cao cho mọi người, ở mọi nơi trở nên dễ dàng hơn.

Kết luận

Quy tắc @when của CSS là một giải pháp mạnh mẽ, thanh lịch cho thách thức lâu dài của việc kết hợp phát hiện tính năng và các truy vấn môi trường trong stylesheet của chúng ta. Mặc dù vẫn còn là một đề xuất, việc áp dụng nó sẽ đơn giản hóa đáng kể việc tạo kiểu có điều kiện, thúc đẩy các chiến lược nâng cao lũy tiến mạnh mẽ hơn, và làm cho CSS của chúng ta dễ đọc và dễ bảo trì hơn.

Với tư cách là các chuyên gia web, trách nhiệm của chúng ta là luôn cập nhật về các tiêu chuẩn mới nổi này. Hãy thử nghiệm với @when trong các môi trường hỗ trợ các tính năng thử nghiệm, cung cấp phản hồi cho các nhà cung cấp trình duyệt và W3C, và chuẩn bị stylesheet của bạn cho một tương lai nơi logic điều kiện là một công dân hạng nhất trong CSS. Tương lai của thiết kế web dễ thích ứng, linh hoạt và toàn diện đang ở ngay sau @when.